<template>
    <div>
        <div id="header">
            <router-link to="/shezhi"><span class="iconfont icon-xuanxiang"></span></router-link>
            <div class="a">
                <span class="iconfont icon-sousuo"></span>
                <input type="text"  placeholder="很好喝研究所">
            </div>
            <router-link to="/xingxi"><span class="iconfont icon-youjian"></span></router-link>
        </div>
        <div id="xiao">
            <div id="xiao-1">
                <h1>我加入的</h1>
                <router-link to="/quanbu">全部&nbsp;&gt;</router-link>
            </div>
            <div id="xiao-2">
                <span class="iconfont icon-kaimen2-05-05"></span>
                <p>加入小组，住进豆瓣 :)</p>
            </div>
            <div id="xiao-1">
                <h1>发现小组</h1>
                <router-link to="/quanbu">更多&nbsp;&gt;</router-link>
            </div>
            <Xiao1/>
        </div>
        <router-view/>
    </div>
</template>
<script>
import Xiao1 from '@/components/xiaozu-1.vue'

export default{
    components:{
        Xiao1
    }
}
</script>


<style>
    #xiao{
        margin-top: .35rem;
        margin-bottom: .54rem;
    }
    #xiao-1{
        width: 90%;
        height: .47rem;
        margin: auto;
        font-size: .20rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    #xiao-1 h1{
        font-size: .20rem;
    }
    #xiao-1 a{
        text-decoration: none;
        color: #494949;
    }
    #xiao-2{
        width: 90%;
        height: .9rem;
        margin: auto;
        text-align: center;
        color: #9c9c9c;
        font-size: .20rem;
    }
    #xiao-2 span{
        font-size: .5rem;
    }
</style>